// // 计数器案例
// import {useEffect, useState} from "react";
// // 函数组件 看起来更舒服
// export default function Count2() {
//   const stateHook = useState({
//     count: 1,
//   });
//   const [state, setState] = stateHook;
//
//   const changeCount = (num) => {
//     const newCount = state.count + num;
//     if (newCount <= 0) return;
//     setState({
//       count: newCount,
//     })
//
//   }
//   useEffect(() => {
//     document.title = state.count;
//     console.log('执行了我')
//   },[state.count])
//   useEffect(() => {
//     console.log('也执行了我')
//   },[])
//   return (
//     <div>
//       <button onClick={() => changeCount(-1)}>-1</button>
//       <div>{state.count}</div>
//       <button onClick={() => changeCount(+1)}>+1</button>
//     </div>
//   )
// }

// 计数器案例 使用redux全局数据
import { useEffect, useState } from "react"
// 函数组件 看起来更舒服
export default function Count2() {
  const [title, setTitle] = useState("title")

  useEffect(() => {
    const timer = setInterval(() => {
      console.log("定时器")
    }, 3000)
    return () => {
      clearTimeout(timer)
    }
  })

  // 这里没有对应的生命周期，怎么做呢？
  useEffect(() => {
    document.title = title
    console.log("执行了我")
  }, [title])

  return (
    <div>
      {title}
      <button onClick={() => setTitle("hello world")}>更改title</button>
    </div>
  )
}

/**
 * 总结hooks里useEffect三大知识点
 * 1. 是在render渲染完之后开始执行的，所以可以替代componentDidMount生命周期
 * 2. 可以抽离出一些逻辑，可以多个useEffect钩子一起使用，多个useEffect可以指定各自依赖于哪个数据的变化才执行，使依赖逻辑高内聚
 * 3. 在需要取消订阅或者需要清除监听或定时器的时候，可以使用useEffect钩子模拟componentWillLeave生命周期
 * 关键点是使用useEffect去return 一个函数，在函数里可以实现取消订阅 */

// 第二个参数可以不传或者是一个数组，非必传项。数组里面依赖改变时候副作用函数才会重新更新。
// 所谓依赖改变就是 [ 之前值 === 之后值 ] ，如果为true不执行useEffect，为false重新执行useEffect。
